<template>
	<view :style="{background: url(zu)}" class="img-details">
		<view class="img-item">
			<image class="img" :src="list.img.url" mode=""></image>
		</view>
		<view class="tab-list">
			<view class="btn-list">
				<!-- <view  class="btn-back b-r">返回</view> -->
				<button open-type="share" type="warn" class="btn-back">分享</button>
				<button type="primary" :data-url="list.img.url" @click="dowImg" class="btn-back">保存</button>
				<button style="color: #fff; background: #f69f2f;" :data-id="list.img" @click="bindCollect" class="btn-back">收藏</button>
			</view>
			<!-- <view style="color: #fff;" class="text">作者QQ：53600408</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:null,
				curl:null,
				id:null,
				zu:null
			}
		},
		onLoad(e) {
			console.log(e.id)
			this.id = e.id
			const db = uniCloud.database();
			db.collection('bz-list').where({
				"_id":e.id
			}).get()
			.then(res=>{
				console.log(res.result.data[0],'记录')
				this.list = res.result.data[0] 
				this.zu = this.list.img.url
				console.log(this.zu)
			})
		},
		onShareAppMessage() {
			return {
				title:'高清壁纸分享',
				path:'/pages/img-details/img-details?id='+this.id,
				imageUrl:list.img.url
			}
		},
		methods: {
			bindCollect(e){
				console.log(e.currentTarget.dataset.id)
				const main = e.currentTarget.dataset.id
				const open = uni.getStorageSync('open')
				const db = uniCloud.database();
				db.collection('bz-collect').where({
					"img.sjc":main.sjc,
					"open":open
				}).get().then(res=>{
					console.log(res.result.data.length,'sscccc')
					const lg = res.result.data.length
					if(lg>=1){
						uni.showToast({
							title:'请勿重复收藏',
							icon:'error'
						})
					}else {
						db.collection('bz-collect').add({
							"_id":this.id,
							"img":main,
							"open":open
						}).then(res=>{
							console.log(res,'sscccc')
							uni.showToast({
								title:'收藏成功',
								icon:'success'
							})
						})
					}
				})
			},
			dowImg(e){
				console.log(e.currentTarget.dataset.url)
				const url = e.currentTarget.dataset.url
				uni.downloadFile({
					url:url
				}).then(res=>{
					console.log(res.tempFilePath,'cg')
					this.curl = res.tempFilePath
					uni.saveImageToPhotosAlbum({
						filePath:this.curl
					}).then(res=>{
						console.log(res,'保存成功')
						uni.showToast({
							icon:'success',
							title:'保存成功'
						})
					}).catch(err=>{
						uni.showToast({
							icon:'error',
							title:'保存失败'
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.img-details{
		height: 100vh;
		background-image: linear-gradient(to right top, #0f396d, #044387, #004da3, #0057be, #0061da, #0076e8, #008bf4, #009fff, #00bbff, #00d1ed, #00e0b0, #24e960);
		.img-item{
			padding-top: 45rpx;
			text-align: center;
			.img{
				border-radius: 55rpx;
				border: 8rpx solid #fff;
				width: 500rpx;
				height: 920rpx;
			}
		}
		.tab-list{
			margin-top: 15rpx;
			.btn-list{
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				width: 440rpx;
				//height: 55rpx;
				//background: rgba(21, 29, 59, 0.3);
				color: #e3e3ee;
				border-radius: 35rpx;
				//padding: 15rpx;
				padding-inline-start: 35rpx;
				padding-inline-end: 35rpx;
				font-size: 24rpx;
				.btn-back{
					width: 210rpx;
					height: 65rpx;
					text-align: center;
					border-radius: 15rpx;
					font-size: 32rpx;
					line-height: 2;
				}
				.btn-cun{
					width: 180rpx;
					text-align: center;
					line-height: .6;
				}
				.b-r{
					border-right: 5rpx solid #e1e1e1;
				}
			}
		}
	}
</style>
